<template>
  <div class="app-container">
    <div>
      全部机：
      <el-checkbox v-model="cbMachine"/>
      <label v-html="allMachinePass"/>
      机号：
      <el-input
        v-model="machine_number"
        placeholder="machine_number"
        style="width:240px"/>
      <label v-html="pass"/>
      号码：
      <el-input
        v-model="bet_number"
        placeholder="bet_number"
        style="width:240px"/>
    </div>

    <div><br/>
      时间：
      <el-date-picker
        v-model="startTime"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      -
      <el-date-picker
        v-model="endTime"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      <label v-html="pass"></label>
      <el-button type="primary" @click="numberDistribute(1)">搜索</el-button>
      <el-button type="primary">打印</el-button>
    </div>

    <div><br/>
      <hr style="background-color: lightgray;"/>
      <br/>
      <el-row>
        <el-button type="primary" plain @click="setCurrentBelongTo('');numberDistribute(1);">所有</el-button>
        <el-button type="primary" plain @click="setCurrentBelongTo('K');numberDistribute(1);">Korsou</el-button>
        <el-button type="primary" plain @click="setCurrentBelongTo('F');numberDistribute(1);">Flamingo</el-button>
        <el-button type="primary" plain @click="setCurrentBelongTo('D');numberDistribute(1);">Diario</el-button>
        <el-button type="primary" plain @click="setCurrentBelongTo('S');numberDistribute(1);">ST</el-button>
        <label v-html="pass"/>当前地区(默认所有地区)：{{ currentBelongTo === '' ? '所有' : currentBelongTo }}
      </el-row>
    </div>
    <br/>

    <el-table
      border
      :header-cell-style="{'color':'#2E53E9','font-size':'1.2em','font-weight':'900','background':'#F0FFF0'}"
      :data="datas">
      <el-table-column
        prop="number" sortable
        label="号码"
        min-width="33.3%"/>
      <el-table-column
        prop="pool" sortable
        label="加奖"
        min-width="33.3%"/>
      <el-table-column
        prop="money" sortable
        label="金额"
        min-width="33.3%"/>
    </el-table>
    <div>
      <br/>
      号码总数：{{ numberCount }}
      <label v-html="pass"/>
      总金额：{{ totalMoney }}
    </div>
    <br/>
    <div class="block">
      <el-pagination
        @current-change="numberDistribute"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :page-count="pageCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import {getEndYMD, getStartYMD} from "@/util/DTUtil";
  import G from "@/components/G";

  export default {
    data() {
      return {
        allMachinePass: '&emsp;&emsp;&emsp;&emsp;',

        pass: "&emsp;",
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },

        cbMachine: false,
        currentBelongTo: '',

        currentPage: 0,
        //getOrders[numberDistribute]接口入参
        machine_number: '',
        bet_number: '',
        startTime: '',
        endTime: '',
        belong_to: '',

        //接口出参
        pageSize: 50,
        pageCount: 0,
        datas: [],
        numberCount: 0,
        totalMoney: 0,
      }
    },
    methods: {
      setCurrentBelongTo(belongTo) {
        this.currentBelongTo = belongTo;
      },

      checkTime(i) {
        if (i < 10) {
          i = "0" + i
        }
        return i;
      },

      numberDistribute(page, isToday) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        this.currentPage = page

        if (this.cbMachine) {
          this.machine_number = ''
        }

        let startDate = new Date(this.startTime);
        let requestStartTime = startDate.getFullYear() + '-' + this.checkTime(startDate.getMonth() + 1) + '-' + this.checkTime(startDate.getDate());
        let endDate = new Date(this.endTime);
        let requestEndTime = endDate.getFullYear() + '-' + this.checkTime(endDate.getMonth() + 1) + '-' + this.checkTime(endDate.getDate());
        let param = '&machine_number=' + this.machine_number
          + '&bet_number=' + this.bet_number
          + '&startTime=' + requestStartTime
          + '&endTime=' + requestEndTime
          + '&belong_to=' + this.currentBelongTo
          + '&page=' + this.currentPage
          + '&pageSize=' + this.pageSize

        if (isToday === '1') {
          param = param + '&isToday=1'
        }

        axios.post(G.host + 'numberDistribute', param).then(res => {
          this.totalMoney = res.data.totalMoney
          this.pageCount = res.data.pageCount
          this.datas = res.data.numberDatas
          this.numberCount = res.data.numberDatas.length
          loading.close()
        });
      }
    },
    mounted() {
      this.numberDistribute(1, '-1')//todo 上线isToday改为1=true
      //初始化当前日期
      this.startTime = getStartYMD()
      this.endTime = getEndYMD()
    }
  }
</script>
